<!-- 发货明细 -->
<template>
  <div class="container-ymm">
    <div class="header-ymm">
      <el-select v-model="search.expressFinished" placeholder="状态" class="seach-select" size="small">
        <el-option
          v-for="item in status_options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-date-picker
        v-model="dateTime"
        :picker-options="pickerOptions"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      />
      <el-input
        v-model="search.keyword"
        type="text"
        class="seach-input"
        size="small"
        placeholder="输入收货人、地址、SKU查询"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"/>
      </el-input>
      <el-button class="greenbt" size="small" @click="getlist()">查询</el-button>

      <el-upload
        v-loading="loading"
        :show-file-list="false"
        :http-request="excelExpressPay"
        action="string"
        class="upload-demo"
        style="display: inline-block">
        <el-button
          v-show="checkPermission('pas:expresspay:authority')"
          class="greenbt"
          size="small"
          @click="excelExpressPay()">匹配费用</el-button>
      </el-upload>
      <el-button
        v-show="checkPermission('pas:editpackage:authority')"
        class="greenbt"
        size="small"
        @click="expressEditFun()"
      >编辑</el-button>
      <el-button
        v-show="checkPermission('pas:confirmPackage:authority')"
        class="greenbt"
        size="small"
        @click="sureOk()"
      >确认</el-button>
    </div>
    <div class="table-ymm">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        height="450"
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column :selectable="isRowDisable" type="selection" width="50"/>
        <el-table-column label="物流公司" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.expressCompany }}</span>
          </template>
        </el-table-column>
        <el-table-column label="物流单号" width="250">
          <template slot-scope="scope">
            <span>{{ scope.row.expressNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="物流费用" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.expressPay !== null">{{ scope.row.expressPay }}</span>
            <span v-else>0.00</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.expressFinished=== 'Y'">已确认</span>
            <span v-else-if="scope.row.expressFinished!=='Y'">待确认</span>
          </template>
        </el-table-column>
        <el-table-column label="发货流水号" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.pipelineNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.mallOrderNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="业务单号" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.otherRemark }}</span>
          </template>
        </el-table-column>
        <el-table-column label="付款时间" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.receivablesTime |parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发货时间" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime |parseTime }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-ymm-bt">
      <el-pagination
        :current-page="search.page"
        :page-sizes="[30,50,100,500,1000]"
        :page-size="search.pageSize"
        :pager-count="6"
        :total="search.total"
        background
        layout="sizes, prev, pager, next,total"
        @current-change="handleCurrentChange"
      />
    </div>
    <component
      :is="modal"
      :modal-data="modalData"
      :modal-static-data="{closeChildAndRefresh}"
      @close="closeChild"
    />
  </div>
</template>
<script>
import { get, post } from '@/api/utils'
import ExpressEdit from './dialog/ExpressEdit.vue'
import { getUserInfo } from '@/api/login'
export default {
  data() {
    return {
      modal: 1,
      modalData: {},
      status_options: [
        { value: '', label: '全部状态' },
        { value: 'N', label: '待确认' },
        { value: 'Y', label: '已确认' }
      ],
      apart_options: [],
      search: {
        expressFinished: 'N',
        keyword: '',
        time: null,
        pageNumber: 0,
        page: 1,
        pageSize: 30,
        total: 0
      },
      tableData: [],
      selectCount: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      dateTime: ['', '']
    }
  },
  mounted() {
    this.getPermission()
    this.getlist()
  },
  methods: {
    closeChildAndRefresh() {
      this.modal = null
      this.search.page = 1
      this.getlist()
      this.selectCount = 0
    },
    // 表格选择
    handleSelectionChange(rows) {
      this.selectCount = rows.length
      // 多条
      this.modalData = rows
    },
    closeChild() {
      this.modal = null
    },
    // 分页
    handleCurrentChange(val) {
      this.search.page = val
      this.getlist()
    },
    // 导入
    excelExpressPay(item) {
      this.loading = true
      var formData = new FormData()
      formData.append('importExcel', item.file)
      post('/wxh-cloud-rest/rest/', '/pas/ShipmentPackage/importExpressPay', formData)
        .then(response => {
          if (response.data.status === 'success') {
            this.$message({
              message: response.data.messge,
              type: 'success'
            })
            this.loading = false
            setTimeout(() => {
              this.getlist()
            }, 1.5 * 1000)
          } else {
            this.$message(response.data.messge)
            this.loading = false
            setTimeout(() => {
              this.getlist()
            }, 10 * 1000)
          }
        })
        .catch(error => {
          console.log('===================' + error)
        })
    },
    sureOk() {
      if (this.selectCount === 0 || this.selectCount === '' || this.selectCount === null) {
        this.$message('请选择要确认的记录！')
        return
      }
      var packageIds = ''
      for (var index = 0; index < this.modalData.length; index++) {
        packageIds += this.modalData[index].packageId + ','
      }
      var data = { 'packageIds': packageIds }
      this.$confirm('进行确认操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        get('/wxh-cloud-rest/rest/', '/pas/ShipmentPackage/confirmPackage', data)
          .then(response => {
            this.$message({
              message: response.data.messge
            })
            this.getlist()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑
    expressEditFun() {
      if (this.selectCount !== 1) {
        this.$message('请选择一条记录编辑！')
        return
      }
      this.modalData = this.modalData[0]
      this.modal = ExpressEdit
    },
    getlist() {
      var vmthis = this
      if (
        this.dateTime !== null &&
        this.dateTime[0] !== '' &&
        this.dateTime[0] !== null
      ) {
        this.search.starTime = this.dateTimeStr(this.dateTime[0])
        this.search.endTime = this.dateTimeStr(this.dateTime[1])
      } else {
        this.search.starTime = ''
        this.search.endTime = ''
      }
      this.search.pageNumber = (this.search.page - 1) * this.search.pageSize
      get('/wxh-cloud-rest/rest/', '/pas/ShipmentPackage/getShipmentPackage', this.search)
        .then(response => {
          if (response.data.status === 'success') {
            vmthis.search.total = response.data.data.total
            vmthis.tableData = response.data.data.list
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    dateTimeStr(datetime) {
      var now = datetime
      var yy = now.getFullYear() // 年
      var mm = now.getMonth() + 1 // 月
      var dd = now.getDate() // 日
      var hh = now.getHours() // 时
      var ii = now.getMinutes() // 分
      var ss = now.getSeconds() // 秒
      var clock = yy + '-'
      if (mm < 10) clock += '0'
      clock += mm + '-'
      if (dd < 10) clock += '0'
      clock += dd + ' '
      if (hh < 10) clock += '0'
      clock += hh + ':'
      if (ii < 10) clock += '0'
      clock += ii + ':'
      if (ss < 10) clock += '0'
      clock += ss
      return clock
    },
    isRowDisable(row) {
      if (row.expressFinished !== 'Y') {
        return true
      }
      return false
    },
    // 权限
    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'token') {
          this.userid = arr2[1]
        } else {
          this.userid = 1
        }
      }
      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo()
        .then(response => {
          if (response.data.status === 'ok') {
            localStorage.setItem(
              this.userid,
              JSON.stringify(response.data.data.permissions)
            )
          }
        })
        .catch(error => {
          console.log(error)
        })
    },

    checkPermission(value) {
      if (value) {
        if (
          localStorage.getItem(this.userid) &&
          localStorage.getItem(this.userid).indexOf(value) >= 0
        ) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    }
  }

}
</script>
<style>
   body{
     background-color: #ffffff;
   }
    /*表格头部颜色*/
  .el-table__header thead  tr th{
      background-color: #edf4f9;
  }
  /*表格字体*/
  .el-table tr {
      font-size: 12px;
  }
  /*表格行高*/
  .el-table .cell{
    line-height: 1.2;
  }
  /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
     background-color: #D7FFD7 !important;
    /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #D7FFD7;
    /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
  }

</style>
